<template>
  <div id="orderlist" style="height:100%;">
    <div class="ordertap">
      <tab custom-bar-width="70px">
        <tab-item selected @on-item-click="tabclick">全部</tab-item>
        <tab-item @on-item-click="tabclick">待发货</tab-item>
        <tab-item @on-item-click="tabclick">待收货</tab-item>
        <tab-item @on-item-click="tabclick">已完成</tab-item>
      </tab>
    </div>
    <div class="ordertaptag">
      <scroller class="ordertagli" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom1" slot="slist1" ref="scrollerBottom1">
        <div class="solist" name="slist1">
          <div class="order-li" v-for="(item, iindex) in lists1" :key="iindex" @click="routeto('orderdetail', { id: item.oid })">
            <div class="sootamp">{{item.otamp}} <span>{{item.ostatus}}</span></div>
            <div class="soopitem" v-for="iitem in item.datainfo">
              <div class="soopleft">
                <img :src="iitem.pimg" alt="">
              </div>
              <div class="soopright">
                <div class="sooprl"><p class="sooptitle">{{iitem.ptitle}}</p><p class="soopweight">规格：{{iitem.pweight}}</p></div>
                <div class="sooprr"><p class="soopprice">{{iitem.pprice}}积分</p><p class="soopnums">&Chi;{{iitem.pnum}}</p></div>
              </div>
            </div>
            <div class="sooptotal">
              共{{item.onum}}件商品　合计：<span>{{item.oprice}}积分</span>
            </div>
            <div class="order_edit" v-if="item.ostatus === '已发货'">
              <a href="javascript:;" @click.stop="routeto('logisticsinfo', {postid: item.oid, type: item.shipperCode})">查看物流</a>
              <a href="javascript:;" @click.stop="orderokall(lists1, iindex, item.oid)">确认收货</a>
            </div>
          </div>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
      <scroller class="ordertagli" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom2" slot="slist2" ref="scrollerBottom2">
        <div class="solist" name="slist2">
          <p class="orderalerttxt">积分兑礼订单将于每周三统一发货，并于7个工作日内完成订单状态变更，期间如有任何问题，<br>请您致电DanSkin客服中心400-070-6099</p>
          <div class="order-li" v-for="(item, iindex) in lists2" :key="iindex" @click="routeto('orderdetail', { id: item.oid })">
            <div class="sootamp">{{item.otamp}} <span>{{item.ostatus}}</span></div>
            <div class="soopitem" v-for="iitem in item.datainfo">
              <div class="soopleft">
                <img :src="iitem.pimg" alt="">
              </div>
              <div class="soopright">
                <div class="sooprl"><p class="sooptitle">{{iitem.ptitle}}</p><p class="soopweight">规格：{{iitem.pweight}}</p></div>
                <div class="sooprr"><p class="soopprice">{{iitem.pprice}}积分</p><p class="soopnums">&Chi;{{iitem.pnum}}</p></div>
              </div>
            </div>
            <div class="sooptotal">
              共{{item.onum}}件商品　合计：<span>{{item.oprice}}积分</span>
            </div>
          </div>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
      <scroller class="ordertagli" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom3" slot="slist3" ref="scrollerBottom3">
        <div class="solist" name="slist3">
          <div class="order-li" v-for="(item, iindex) in lists3" :key="iindex" @click="routeto('orderdetail', { id: item.oid })">
            <div class="sootamp">{{item.otamp}} <span>{{item.ostatus}}</span></div>
            <div class="soopitem" v-for="iitem in item.datainfo">
              <div class="soopleft">
                <img :src="iitem.pimg" alt="">
              </div>
              <div class="soopright">
                <div class="sooprl"><p class="sooptitle">{{iitem.ptitle}}</p><p class="soopweight">规格：{{iitem.pweight}}</p></div>
                <div class="sooprr"><p class="soopprice">{{iitem.pprice}}积分</p><p class="soopnums">&Chi;{{iitem.pnum}}</p></div>
              </div>
            </div>
            <div class="sooptotal">
              共{{item.onum}}件商品　合计：<span>{{item.oprice}}积分</span>
            </div>
            <div class="order_edit" v-if="item.ostatus === '已发货'">
              <a href="javascript:;" @click.stop="routeto('logisticsinfo', {postid: item.oid, type: item.shipperCode})">查看物流</a>
              <a href="javascript:;" @click.stop="orderokone(iindex, item.oid)">确认收货</a>
            </div>
          </div>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
      <scroller class="ordertagli" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom4" slot="slist4" ref="scrollerBottom4">
        <div class="solist" name="slist4">
          <div class="order-li" v-for="(item, iindex) in lists4" :key="iindex" @click="routeto('orderdetail', { id: item.oid })">
            <div class="sootamp">{{item.otamp}} <span>{{item.ostatus}}</span></div>
            <div class="soopitem" v-for="iitem in item.datainfo">
              <div class="soopleft">
                <img :src="iitem.pimg" alt="">
              </div>
              <div class="soopright">
                <div class="sooprl"><p class="sooptitle">{{iitem.ptitle}}</p><p class="soopweight">规格：{{iitem.pweight}}</p></div>
                <div class="sooprr"><p class="soopprice">{{iitem.pprice}}积分</p><p class="soopnums">&Chi;{{iitem.pnum}}</p></div>
              </div>
            </div>
            <div class="sooptotal">
              共{{item.onum}}件商品　合计：<span>{{item.oprice}}积分</span>
            </div>
          </div>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
  import { Tab, TabItem, Badge, LoadMore, Scroller } from 'vux'

  export default {
    name: 'order',
    components: {
      Badge,
      Tab,
      TabItem,
      LoadMore,
      Scroller
    },
    data () {
      return {
        isupload: false,
        isshowload: false,
        loadtip: '',
        bottomCount1: 0,
        bottomCount2: 0,
        bottomCount3: 0,
        bottomCount4: 0,
        upList: [],
        lists1: [],
        lists2: [],
        lists3: [],
        lists4: []
      }
    },
    created () {
      // show usable list
      this.getList(this.bottomCount1, 'all')
      .then((data) => {
        this.lists1.push.apply(this.lists1, data)
        if (data.length > 0) {
          this.bottomCount1 = this.lists1.length
        }
      }, () => {})
      // show used list
      this.getList(this.bottomCount2, 'waitsend')
      .then((data) => {
        this.lists2.push.apply(this.lists2, data)
        if (data.length > 0) {
          this.bottomCount2 = this.lists2.length
        }
      }, () => {})
      // show overtime list
      this.getList(this.bottomCount3, 'waitget')
      .then((data) => {
        this.lists3.push.apply(this.lists3, data)
        if (data.length > 0) {
          this.bottomCount3 = this.lists3.length
        }
      }, () => {})
      // show end list
      this.getList(this.bottomCount4, 'over')
      .then((data) => {
        this.lists4.push.apply(this.lists4, data)
        if (data.length > 0) {
          this.bottomCount4 = this.lists4.length
        }
      }, () => {})
    },
    methods: {
      tabclick: function (index) {
        this.swiperItemIndex = index
        const taplist = document.querySelectorAll('.ordertagli')
        for (var i = 0; i < taplist.length; i++) {
          if (index === i) {
            taplist[i].style.display = 'block'
          } else {
            taplist[i].style.display = 'none'
          }
        }
      },
      getList: function (lastnumber, type) {
        return this.$axios.post(this.apidomain + '/api/integralMall/queryExchangeRecord/' + this.getCookie('appid'), {
          openId: this.getCookie('openid'),
          type: type,
          pageIndex: lastnumber
        })
        .then((response) => {
          return response.data.data
        })
        .catch(function (error) {
          console.log(error)
          return []
        })
      },
      onScrollBottom1 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount1, 'all')
              .then((data) => {
                this.lists1.push.apply(this.lists1, data)
                if (data.length > 0) {
                  this.bottomCount1 = this.lists1.length
                }
              }, () => {})
              this.$refs.scrollerBottom1.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      onScrollBottom2 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount2, 'waitsend')
              .then((data) => {
                this.lists2.push.apply(this.lists2, data)
                if (data.length > 0) {
                  this.bottomCount2 = this.lists2.length
                }
              }, () => {})
              this.$refs.scrollerBottom2.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      onScrollBottom3 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount3, 'waitget')
              .then((data) => {
                this.lists3.push.apply(this.lists3, data)
                if (data.length > 0) {
                  this.bottomCount3 = this.lists3.length
                }
              }, () => {})
              this.$refs.scrollerBottom3.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      onScrollBottom4 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount4, 'over')
              .then((data) => {
                this.lists4.push.apply(this.lists4, data)
                if (data.length > 0) {
                  this.bottomCount4 = this.lists4.length
                }
              }, () => {})
              this.$refs.scrollerBottom4.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      orderokall (index, id) {
        this.$axios.post(this.apidomain + '/api/integralMall/confirmOrder/' + this.getCookie('appid'), {
          id: id
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.lists1[index].ostatus = '已完成'
          }
        })
        .catch(function (error) {
          console.log(error)
        })
      },
      orderokone (index, id) {
        this.$axios.post(this.apidomain + '/api/integralMall/confirmOrder/' + this.getCookie('appid'), {
          id: id
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            // 重置待收货和已完成列表
            this.lists3 = []
            this.lists4 = []
            this.bottomCount3 = 0
            this.bottomCount4 = 0
            // show overtime list
            this.getList(this.bottomCount3, 'waitget')
            .then((data) => {
              this.lists3.push.apply(this.lists3, data)
              if (data.length > 0) {
                this.bottomCount3 = this.lists3.length
              }
            }, () => {})
            // show end list
            this.getList(this.bottomCount4, 'over')
            .then((data) => {
              this.lists4.push.apply(this.lists4, data)
              if (data.length > 0) {
                this.bottomCount4 = this.lists4.length
              }
            }, () => {})
          }
        })
        .catch(function (error) {
          console.log(error)
        })
      }
    }
  }
</script>

<style lang="less">
@import '../assets/less/order/orderlist.less';
</style>
